<template>
  <div class="ebook-reader">
    <div id='read'></div>
    <div class="ebook-reader-mask"
         @click="onMaskClick"
         @touchmove="move"
         @touchend="moveEnd"
         @mousedown.left="onMouseEnter"
         @mousemove.left="onMouseMove"
         @mouseup.left="onMouseEnd"
         ></div>
  </div>
</template>

<script type="text/ecmascript-6">
import Epub from "epubjs";

import { ebookMixin } from "../../utils/mixin";
import { mapActions } from  'vuex'
import {
  getFontSize,
  saveFontSize,
  getFontFamily,
  saveFontFamily,
  getTheme,
  saveTheme,
  getLocation
} from "../../utils/localStorage";
//import { addCss } from '../../utils/book'
import { flatten } from '../../utils/book'
global.ePub = Epub;
export default {
  mixins: [ebookMixin],
  data() {
    return {
      havePaginate: false,
      isOnline: false
    };
  },
  methods: {
      ...mapActions(['setMenuVisible']),
    onMouseEnd(e) {
      if (this.mouseState === 2) {
        this.setOffsetY( 0);
        this.firstOffsetY = null;
        this.mouseState = 3;
        e.preventDefault();
        e.stopPropagation();
      }else{
        this.mouseState === 4
      }
      this.mouseEndTime = e.timeStamp;
      const time = this.mouseEndTime - this.mouseStartTime;
      if (time < 200) {
        this.mouseState = 4;
      }
      e.preventDefault();
      e.stopPropagation();
    },
    onMouseMove(e) {
      if (this.mouseState === 1) {
        this.mouseState = 2;
      } else if (this.mouseState === 2) {
        let offsetY = 0;
        if (this.firstOffsetY) {
          offsetY = e.clientY - this.firstOffsetY;
          this.setOffsetY(offsetY)
          //this.$store.commit("SET_OFFSETY", offsetY);
        } else {
          this.firstOffsetY = e.clientY;
        }
      }
      e.preventDefault();
      e.stopPropagation();
    },
    onMouseEnter(e) {
      this.mouseState = 1;
      this.mouseStartTime = e.timeStamp;
      e.preventDefault();
      e.stopPropagation();
    },
    move(e) {
      let offsetY = 0;
      if (this.firstOffsetY) {
        offsetY = e.changedTouches[0].clientY - this.firstOffsetY;
        this.setOffsetY(offsetY )
        //this.$store.commit("SET_OFFSETY", offsetY);
      } else {
        this.firstOffsetY = e.changedTouches[0].clientY;
      }
      e.preventDefault();
      e.stopPropagation();
    },
    moveEnd() {
      this.setOffsetY(0);
      this.firstOffsetY = 0;
    },
    onMaskClick(e) {
      if (this.mouseState && (this.mouseState === 2 || this.mouseState ===3)) {
        return
      } else if (this.mouseState === 1 || this.mouseState === 4) {
        const offsetX = e.offsetX;
        const width = window.innerWidth;
        if (offsetX > 0 && offsetX < width * 0.3) {
          this.prevPage();
        } else if (offsetX > 0 && offsetX > width * 0.7) {
          this.nextPage();
        } else {
          this.toggleMenuVisible();
        }
      }
      this.mouseState = 4;
    },
    prevPage() {
      if (this.rendition) {
        this.rendition.prev().then(() =>{
          this.refreshLocation();
        });

      }
      this.hideTitleAndMenu()
    },
    nextPage() {
      if (this.rendition) {
        this.rendition.next().then(() =>{
          this.refreshLocation();
        })

      }
      this.hideTitleAndMenu()
    },
    toggleTitleAndMenu() {
      console.log(this.menuVisible)


      if (this.menuVisible) {
        this.setFontFamilyVisible(false)
        this.setSettingVisible(-1);
        this.setSettingVisible(-1)
      }
       this.setMenuVisible(!this.menuVisible)
    },
    hideTitleAndMenu() {
      this.setMenuVisible(false)
      this.setSettingVisible(-1)
      this.setSettingVisible(-1)
      this.setFontFamilyVisible(false)
    },
    initFontSize() {
      let fontSize = getFontSize(this.fileName)
        if(!fontSize){
          saveFontSize(this.fileName, this.defaultFontSize)
        } else {
          this.rendition.themes.fontSize(fontSize)
          this.setDefaultFontSize(fontSize)
        }
    },
    initFontFamily() {
      let font = getFontFamily(this.fileName)
        if(!font){
          saveFontFamily(this.fileName, this.defaultFontFamily)
        } else {
          this.rendition.themes.font(font)
          this.setDefaultFontFamily(font)
        }
    },
    initTheme() {
      let defaultTheme = getTheme(this.fileName)
      if(!defaultTheme){
        defaultTheme = this.themeList[0].name

        saveTheme(this.fileName, defaultTheme)
      }
      this.setDefaultTheme(defaultTheme)
      this.themeList.forEach(theme =>{
        this.rendition.themes.register(theme.name,theme.style)
      })
      this.rendition.themes.select(defaultTheme)
    },

    initRendition() {
      this.rendition = this.book.renderTo('read', {
        width: parent,
        height: (innerHeight-268.5),
        method: "default"
      });
      const location = getLocation(this.fileName)
      this.display(location, () =>{
        this.initTheme()
        this.initFontSize()
        this.initFontFamily()
        this.initGlobalStyle()
      })

      this.rendition.hooks.content.register(contents => {
        Promise.all(
          [
            contents.addStylesheet(`${process.env.VUE_APP_RES_URL}/fonts/daysOne.css`),
            contents.addStylesheet(`${process.env.VUE_APP_RES_URL}/fonts/cabin.css`),
            contents.addStylesheet(`${process.env.VUE_APP_RES_URL}/fonts/montserrat.css`),
            contents.addStylesheet(`${process.env.VUE_APP_RES_URL}/fonts/tangerine.css`)
          ]).then(()=>{

          })

      })
    },
    initGesture(){
      this.rendition.on('touchstart', event =>{
        this.touchStartX = event.changedTouches[0].clientX
        this.touchStartTime = event.timeStamp
      })
      this.rendition.on('touchend', event =>{
        const offsetX = event.changedTouches[0].clientX - this.touchStartX
        const time = event.timeStamp - this.touchStartTime
        if(time <500 && offsetX > 40){
          this.prevPage()
        }else if(time < 500 && offsetX <-40 ){

          this.nextPage()
        }else{
          this.toggleTitleAndMenu()
        }
        event.preventDefault()
        event.stopPropagation()

      })

    },
    parseBook(){
      this.book.loaded.cover.then(cover => {
        this.book.archive.createUrl(cover).then(url => {
          this.setCover(url)
        })
      })
      this.book.loaded.metadata.then(metadata => {
        this.setMetadata(metadata)
      })
      this.book.loaded.navigation.then(nav => {
          const navItem =  flatten(nav.toc)
          function find(item,level = 0) {
            return !item.parent ? level : find(navItem.filter(parentItem => parentItem.id === item.parent)[0],++level)
          // navItem.forEach(item => {
          //   item.level = find(item)
          //   item.total = 0
          //   item.pagelist = []
          //   if (item.href.match(/^(.*)\.html$/)) {
          //     item.idhref = item.href.match(/^(.*)\.html$/)[1]
          //   } else if (item.href.match(/^(.*)\.xhtml$/)) {
          //     item.idhref = item.href.match(/^(.*)\.xhtml$/)[1]
          //   }
          // })
          }
          navItem.forEach(item => {
            item.level = find(item)
          })
          this.setNavigation(navItem)
        })

    },
    initEpub() {

      const url = `${process.env.VUE_APP_RES_URL}`+ '/epub/' + this.fileName + ".epub";
      this.book = new Epub(url);
      this.setCurrentBook(this.book)
      this.initRendition()
      this.initGesture()
      this.parseBook()
      this.book.ready.then(() =>{
        return this.book.locations.generate(750 * (window.innerWdith/ 375)*(getFontSize(this.fileName) /16))
      }).then(location =>{
        (location)
        this.setBookAvailable(true)
      })
    }
  },
  mounted() {
    this.setFileName(this.$route.params.fileName.split("|").join("/")).then(
      () => {
        this.initEpub();

      }
    );
  }
};
</script>

<style  rel="stylesheet/scss" scoped>
@import "../../assets/styles/global.scss";

  .ebook-reader {
    width: 100%;
    height: 100%;
    overflow: hidden;

  }
  .ebook-reader-mask {
      position: absolute;
      z-index: 150;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
</style>
